import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../../config';
import { Divider, DatePicker, Input } from 'antd';
import './DMX.less'
import { getVoice } from '../../../../api/index';
import { formatDateSlashes } from "../../../../utils/dataUtils";
import { getdataById } from "../../../../utils/socialize1";
const { RangePicker } = DatePicker;
export default class socialize1 extends Component {
  constructor(a) {
    super(a);
    this.state = {
      currentItems: [],//当前页码的数据
      currentPage: 1,//当前的页码
      totalPages: 0,//所有的页码总数
      itemsPerPage: 15,//每页展示多少数据
      like: [],
      reply: [],
      movetime: ''
    }
  }
  componentWillUnmount() {

  }
  async componentDidMount() {

    //获取数据
    let line = ''
    let page = 1
    let items = 15
    let result = await getVoice(page, items)


    meshLog('getVoice', result);
    let itemsdata = result.msg.voiceInfo
    meshLog('voiceInfo', itemsdata);
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('每页的个数', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('总的页数', totalPages);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,

    })


    //this.goToPage(currentPage);
  }
  goToPage = async (page) => {
    meshLog('当前展示的page', page);
    let line = ''
    let items = 15
    let result = await getVoice(page, items)
    let itemsdata = result.msg.voiceInfo

    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('itemsPerPage', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('totalPages', itemsdata);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
    })

  };

  // 首页
  gotoFirstPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = 1
      this.setState({
        currentPage: 1,
      })
      this.goToPage(1);
    }

  };
  // 上一页
  goToPreviousPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage - 1,
      })
      this.goToPage(currentPage - 1);
    }

  };
  // 下一页
  goToNextPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage + 1,
      })
      this.goToPage(currentPage + 1);
    }
  };

  // 末页
  goToEndPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.totalPages
      this.setState({
        currentPage: currentPage,
      })
      this.goToPage(currentPage);
    }
  };
  // 选择页确定
  changeTOPage = () => {
    var inputElement = document.getElementById('inputid');
    let inputValue = inputElement.value;
    let currentPage = 0
    meshLog('inputValue', inputValue);
    if (inputValue >= this.state.totalPages) {
      inputElement.value = this.state.totalPages
      currentPage = this.state.totalPages
    } else {
      currentPage = parseInt(inputValue)//强制转换成数字类型
    }
    this.setState({
      currentPage: currentPage,
    })
    this.goToPage(currentPage);
  };
  //查询按钮
  handleFruitChange = () => {
    var selectBox = document.getElementById("fruit1");
    meshLog('selectBox2', this.state.movetime);
    meshLog('selectBox', selectBox.value);

  };
  onChange = (info) => {
    console.log('RangePicker:', info);
    this.setState({
      movetime: info,
    })
  };
  render() {
    return (
      <div className="DMX" >
        <div className="DMXdaohang">
          <span className='DMXdaohangzuo' >位置： 系统设置 》灯光控制系统》DMX灯光控制系统</span>
        </div>
        <div className="DMXneirong">
          <div className="DMXneirong1" >
            {/* <div className="DMXquery" >
              <div className="DMXquerytitle" >条件查询</div>
              <Divider />
              <div className="DMXquerydate" >

                <label className="DMXfruit1" for="fruit1">用户</label>
                <input id="fruit1" style={{ width: 150 }} />

                <label className="DMXfruit2" for="fruit2">选择时间</label>

                <RangePicker id='fruit2' placeholder={['开始时间', '结束时间']} onChange={(_d, info) => { this.onChange(info) }} />

                <button className="handleFruit" onClick={() => { this.handleFruitChange() }}>
                  查询
                </button>

              </div>

            </div> */}
            <div className="DMXmessage"  >
              <div className="DMXmessagetitle" >控制列表</div>
              <div className="DMXmessagedate" >
                <div className="DMXtitledate">
                  <div className="span1">序号</div>
                  <div className="span11">功能名称</div>
                  <div className="span11">功能描述</div>
                  {/* <div className="span11">语音地址</div> */}
                </div>

                <div className="DMXdatashuju" style={{ backgroundColor: '#F1F5FB' }}>
                  <div className="span2">1</div>
                  <div className="span22">DMX有线与蓝牙无线上位机控制</div>
                  <div className="span22">DMX与蓝牙主控系统定时切换功能</div>
                </div>
                <div className="DMXdatashuju" style={{ backgroundColor: '' }}>
                  <div className="span2">2</div>
                  <div className="span22">DMX有线与蓝牙无线上位机控制</div>
                  <div className="span22">单灯DMX与蓝牙控制互动切换功能</div>
                </div>
                <div className="DMXdatashuju" style={{ backgroundColor: '#F1F5FB' }}>
                  <div className="span2">3</div>
                  <div className="span22">DMX有线主控开关控制</div>
                  <div className="span22">远程定时开启关闭DMX主控</div>
                </div>
                <div className="DMXdatashuju" style={{ backgroundColor: '' }}>
                  <div className="span2">4</div>
                  <div className="span22">蓝牙无线开关控制</div>
                  <div className="span22">远程定时开启关闭蓝牙无线控制</div>
                </div>
                <div className="DMXdatashuju" style={{ backgroundColor: '#F1F5FB' }}>
                  <div className="span2">5</div>
                  <div className="span22">蓝牙无线开关控制</div>
                  <div className="span22">远程按程序设定蓝牙一键开灯</div>
                </div>
                <div className="DMXdatashuju" style={{ backgroundColor: '' }}>
                  <div className="span2">6</div>
                  <div className="span22">蓝牙无线开关控制</div>
                  <div className="span22">远程定时开启关闭蓝牙互动功能</div>
                </div>




                {/* {
                  this.state.currentItems && this.state.currentItems.map((element, key) => {
                    if (!element.children) {
                      return (
                        <div className="DMXdatashuju" style={{ backgroundColor: key % 2 == 0 ? '' : '#F1F5FB' }} key={key}>
                          <div className="span2" >{key + 1}</div>

                          <div className="span22" >{element.type == 0 ? '静音' : element.type == 1 ? '简洁' : element.type == 2 ? '详细' : '无'}</div>
                          <div className="span22">{element.content.slice(0, 15)}</div>
                          <div className="span22">{element.url}</div>
                        </div>
                      )
                    }
                    else {
                      return (
                        <span>{element}</span>
                      )
                    }
                  })
                } */}
              </div>
              {/* <div className='zongyeshu'>
                <span style={{ marginLeft: 40 }}>共{this.state.totalPages}页</span>
                <label className="PerPage" for="PerPage">每页显示</label>
                <select id="PerPage" style={{ color: "#000000" }} name="PerPage">
                  <option value="10">15</option>
                  <option value="8">10</option>
                  <option value="5">5</option>
                </select>个
              </div>
              <div className='current'>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.gotoFirstPage() }}>
                  首页
                </button>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.goToPreviousPage() }}>
                  上一页
                </button>
                {Array.from({ length: this.state.totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => { this.goToPage(i + 1) }}
                    style={{ margin: '2px' }}
                    disabled={this.state.currentPage === i + 1}
                  >
                    {i + 1}
                  </button>
                ))}
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToNextPage() }}>
                  下一页
                </button>
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToEndPage() }}>
                  末页
                </button>
                <span>&nbsp;&nbsp;共{this.state.totalPages}页&nbsp;&nbsp;</span>
                到 <input id='inputid' style={{ width: 30 }} type='number' min={1} ></input>页&nbsp;&nbsp;
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.changeTOPage() }}>
                  确定
                </button>
              </div> */}
            </div>
          </div>
          {/* <div className="DMXrunning">
            <h1 style={{ marginTop: 20 }} >有作者正在发布，请前往审核...</h1>
          </div> */}
        </div>
      </div >
    )
  }
}
